{% load static %}

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>职业测评报告</title>

    <link rel="stylesheet" href="CSS/paper.css">
    <link rel="stylesheet" href="{% static '/css/paper.css' %}">

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>

    <script type="text/javascript" src="{% static 'js/echarts/echarts.js' %}"></script>

    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <script src="{% static 'js/echarts/echarts-wordcloud.js' %}"></script>
    
    <!-- 添加markdown样式 -->
    <style>
        .questionnaire-analysis h1, 
        .questionnaire-analysis h2, 
        .questionnaire-analysis h3 {
            margin-top: 20px;
            margin-bottom: 10px;
            font-weight: bold;
        }
        .questionnaire-analysis h1 { font-size: 24px; }
        .questionnaire-analysis h2 { font-size: 20px; }
        .questionnaire-analysis h3 { font-size: 18px; }
        .questionnaire-analysis ul, 
        .questionnaire-analysis ol {
            margin-left: 20px;
            margin-bottom: 10px;
        }
        .questionnaire-analysis li {
            margin-bottom: 5px;
        }
        .questionnaire-analysis p {
            margin-bottom: 10px;
        }
        .questionnaire-analysis strong {
            font-weight: bold;
        }
        .questionnaire-analysis em {
            font-style: italic;
        }
        .questionnaire-analysis blockquote {
            border-left: 4px solid #ddd;
            padding-left: 10px;
            color: #666;
            margin: 10px 0;
        }
        .questionnaire-analysis code {
            background-color: #f5f5f5;
            padding: 2px 4px;
            border-radius: 3px;
            font-family: monospace;
        }
    </style>
</head>

<body>
    <div class="box">


        <div class="box1">
            <h4>推荐职位<br>Recommended positions</h4>


            <div id="chart1"></div>

            <script>
                const option1 = {
                    radar: {
                        indicator: [
                            { name: '{{ career.0.0 }}', max: 100 },
                            { name: '{{ career.1.0 }}', max: 100 },
                            { name: '{{ career.2.0 }}', max: 100 },
                            { name: '{{ career.3.0 }}', max: 100 },
                            { name: '{{ career.4.0 }}', max: 100 },
                            { name: '{{ career.5.0 }}', max: 100 }
                        ]
                    },
                    series: [
                        {
                            name: '',
                            type: 'radar',
                            data: [
                                {
                                    value: ['{{ career.0.1 }}', '{{ career.1.1 }}', '{{ career.2.1 }}', '{{ career.3.1 }}', '{{ career.4.1 }}', '{{ career.5.1 }}'],
                                    name: 'Allocated Budget',
                                    animationDelay: function (idx) { // 延迟动画效果
                                        return idx * 2000; // 根据索引延迟每个数据的动画效果
                                    }
                                },
                                {
                                    name: 'Actual Spending',
                                    animationDelay: 2 // 立即开始动画效果
                                }
                            ]
                        }
                    ],
                    animation: true, // 启用动画效果
                    animationDuration: 15000, // 动画持续时间
                    animationEasing: 'elasticOut' // 使用弹性缓动效果
                };

                var chartDom1 = document.getElementById('chart1');
                var myChart1 = echarts.init(chartDom1);
                option1 && myChart1.setOption(option1);
            </script>


        </div>
        <div class="box2">
            <h4>能力分析<br>ability analysis</h4>

            <div id="chart2"> </div>

            <script>
                const option2 = {
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [ // series 应该是一个数组
                        { // 将饼图的配置移到数组的第一个元素中
                            name: '能力分析', // 可以给系列一个名字
                            type: 'pie',
                            radius: '50%',
                            data: [
                                // 修正 value 字段的语法错误，移除多余的空格和花括号
                                { value: {{ skill.0.1 }}, name: '{{ skill.0.0 }}' },
                                { value: {{ skill.1.1 }}, name: '{{ skill.1.0 }}' },
                                { value: {{ skill.2.1 }}, name: '{{ skill.2.0 }}' },
                                { value: {{ skill.3.1 }}, name: '{{ skill.3.0 }}' },
                                { value: {{ skill.4.1 }}, name: '{{ skill.4.0 }}' },
                                { value: {{ skill.5.1 }}, name: '{{ skill.5.0 }}' }
                            ],
                            emphasis: { // emphasis 应该在 series 内部
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            },
                            animationType: 'scale', // 动画相关配置也应在 series 内部
                            animationEasing: 'elasticOut',
                            animationDelay: function (idx) {
                                return idx * 700;
                            },
                            animationDuration: 10000
                        }
                    ], // series 数组结束
                    animation: true // animation 属性在顶层
                };

                var chartDom2 = document.getElementById('chart2');
                var myChart2 = echarts.init(chartDom2);
                option2 && myChart2.setOption(option2);
            </script>

        </div>
        <!-- <div class="box3">
                <h4>性格分析<br>person analysis</h4>

                <div id="chart3" ></div>

                <script>
                    const option3 = {
                        dataset: {
                            source: [
                                ['score', 'amount', 'product'],
                                [89.3, 58212, '外向'],
                                [50.1, 42755, '细心'],
                                [89.7, 90145, '积极'],
                                [68.1, 79146, '专注'],
                                [10.6, 101852, '敏感'],
                            ]
                        },
                        grid: { containLabel: true },
                        xAxis: { name: '' },
                        yAxis: { type: 'category' },
                        visualMap: {
                            orient: 'horizontal',
                            left: 'center',
                            min: 10,
                            max: 100,
                            dimension: 0,
                            inRange: {
                                color: ['blue', '#FFCE34', '#5725bc']
                            }
                        },
                        series: [
                            {
                                type: 'bar',
                                encode: {
                                    y: 'product'
                                },
                                animationType: 'scale', // 设置动画类型为缩放
                                animationEasing: 'elasticOut', // 设置动画缓动效果
                                animationDelay: function (idx) { // 自定义动画延迟效果
                                    return idx * 2000; // 根据索引延迟每个数据的动画效果
                                },
                                animationDuration: 20000 // 设置动画持续时间
                            }
                        ],
                        animation: true // 启用动画效果
                    };

                    var chartDom3 = document.getElementById('chart3');
                    var myChart3 = echarts.init(chartDom3);
                    option3 && myChart3.setOption(option3);
                </script>


            </div>-->

        <div class="box10">
            <h4>性格分析<br>Character Analysis</h4>
            <div class="box11">
                <div class="box5">


                    <div id="chart4"></div>
                    <script>
                        const option4 = {
                            series: [
                                {
                                    type: 'treemap',
                                    animationDuration: 1000, // 动画持续时间
                                    animationEasing: 'cubicInOut', // 动画缓动效果
                                    animationDelay: function (idx) {
                                        // 为每个节点设置不同的延迟时间，创造出错落的动画效果
                                        return idx * 500;
                                    },
                                    roam: true,
                                    breadcrumb: {
                                        show: true,
                                        emptyItemWidth: 20, // 面包屑导航中每个节点的宽度
                                        itemStyle: {
                                            color: 'lavender',
                                            fontSize: 12,
                                            fontWeight: 'normal'
                                        }
                                    },
                                    label: { // 确保标签显示
                                        show: true,
                                        formatter: '{b}', // 显示名称
                                        color: '#ffffff',
                                        fontSize: 14,
                                        fontWeight: 'bold'
                                    },
                                    emphasis: {
                                        label: {
                                            show: true, // 显示节点的高亮标签
                                            fontSize: 16,
                                            fontWeight: 'bold'
                                        },
                                        itemStyle: {
                                            borderWidth: 2,
                                            borderColor: '#ffffff',
                                            shadowBlur: 10, // 高亮节点的阴影模糊大小
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    },
                                    data: [
                                        {
                                            name: 'nodeA',
                                            value: 10,
                                            itemStyle: { color: '#ff0000' },
                                            children: [
                                                {
                                                    name: '{{ nature.0.0 }} {{ nature.0.1 }}%',
                                                    value: 10,
                                                    itemStyle: { color: '#ff4567' }
                                                },
                                                {
                                                    name: '{{ nature.1.0 }} {{ nature.1.1 }}%',
                                                    value: 6,
                                                    itemStyle: { color: '#0000ff' }
                                                },

                                                {
                                                    name: '{{ nature.2.0 }} {{ nature.2.1 }}%',
                                                    value: 6,
                                                    itemStyle: { color: '#678800' }
                                                }




                                            ]
                                        },
                                        {
                                            name: 'nodeB',
                                            value: 10,
                                            itemStyle: { color: '#ffff00' },
                                            children: [
                                                {
                                                    name: 'nodeBa',
                                                    value: 6,
                                                    itemStyle: { color: '#ff00ff' },
                                                    children: [
                                                        {
                                                            name: '{{ nature.3.0 }} {{ nature.3.1 }}%',
                                                            value: 20,
                                                            itemStyle: { color: '#ff8800' }
                                                        },
                                                        {
                                                            name: '{{ nature.4.0 }} {{ nature.4.1 }}%',
                                                            value: 15,
                                                            itemStyle: { color: '#5725bc' } // 橙色，表示含义5
                                                        }

                                                    ]
                                                }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        };
                        var chartDom4 = document.getElementById('chart4');
                        var myChart4 = echarts.init(chartDom4);
                        option4 && myChart4.setOption(option4);

                    </script>


                </div>
                <div class="box4">

                    <!--<h4>个人现状分析<br>Person</h4>-->

                    <div class="content"> <br><br>
                        <span class="animated-text" style="animation-delay: 0.5s; color: #36A2EB;">{{ advice }}
                            </span><br><br>


                    </div>



                </div>


                <script>
                    const animatedTexts = document.getElementsByClassName('animated-text');
                    for (let i = 0; i < animatedTexts.length; i++) {
                        animatedTexts[i].style.animationDelay = `${i * 0.8}s`; // 设置每行文字的动画延迟时间
                    }
                </script>
            </div>
        </div>
        <div class="image-overlay">

        </div>









        <!-- <div class="box6">
                <h4>能力分析<br>ability analysis</h4>
                <p >
                    根据你的关注话题和兴趣，有些场景下表现出内敛的特质；<br>
                    <br>
                    尽管关注的领域较为广泛，但没有明显的社交拓展或者友谊网络的展现，显得有些远离社交场合；
                    <br>
                    <br>
                    根据你关注的点和读过的书，你比较关注自己和他人的情感，感性思维能力较为敏锐；
                    <br>
                    <br>
                    在你对待学数和美容方面，可以看出你是比较注重细节的人；
                    <br>
                    <br>
                    你会关注多个领域，但比较单一。
                </p>

            </div>

-->
        <div class="box10">
            <h4>问卷答题统计<br>Questionnaire Statistics</h4>
            <div class="box11">
                <div class="box13" style="width: 100%; display: flex; justify-content: center;">
                    <div id="questionnaire-bar" style="width: 900px; height: 400px;"></div>
                    <script>
                        // 准备数据
                        const qData = [
                            {% for qtype, qinfo in questionnaire_raw.items %}
                                {
                                    name: "{{ qtype }}",
                                    correct: {{ qinfo.correct_count }},
                                    total: {{ qinfo.total_count }}
                                }{% if not forloop.last %},{% endif %}
                            {% endfor %}
                        ];
                        const qNames = qData.map(q => q.name);
                        const qCorrect = qData.map(q => q.correct);
                        const qTotal = qData.map(q => q.total);

                        // 绘制柱状图
                        var barChartDom = document.getElementById('questionnaire-bar');
                        var barChart = echarts.init(barChartDom);
                        var barOption = {
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: { type: 'shadow' }
                            },
                            legend: {
                                data: ['答对数', '总题数']
                            },
                            grid: {
                                left: '5%',
                                right: '5%',
                                bottom: 60,
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                data: qNames,
                                axisLabel: {
                                    interval: 0,
                                    rotate: 30,
                                    fontSize: 16
                                }
                            },
                            yAxis: {
                                type: 'value',
                                minInterval: 1
                            },
                            series: [
                                {
                                    name: '答对数',
                                    type: 'bar',
                                    data: qCorrect,
                                    itemStyle: { color: '#36A2EB' }
                                },
                                {
                                    name: '总题数',
                                    type: 'bar',
                                    data: qTotal,
                                    itemStyle: { color: '#FFCE56' }
                                }
                            ]
                        };
                        barChart.setOption(barOption);
                    </script>
                </div>
            </div>
        </div>

        <div class="box10">
            <h4>智能分析<br>AI analysis</h4>
            <div class="box11">
                <div class="box12"> <span style="  color: RGB(87, 37, 188);">{{ desc }}


                    </span></div>
                <div class="box13">
                    <div id="graph"></div>
                    <script> var graphTwoChart = echarts.init(document.getElementById('graph'));

                        graphTwoChart.setOption({
                            title: {
                                text: '职业发展',
                                textStyle: {
                                    color: 'white',
                                },
                                left: "30px",
                                top: "20px"
                            },

                            tooltip: {
                                show: false
                            },
                            legend: {
                                show: false
                            },
                            xAxis: {
                                show: false
                            },
                            yAxis: {
                                show: false
                            },
                            grid: {
                                top: '80px'
                            },
                            series: [{

                                type: "graph",
                                // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                                roam: true,
                                // 是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。[ default: false ]
                                focusNodeAdjacency: true,
                                // 力引导布局相关的配置项，力引导布局是模拟弹簧电荷模型在每两个节点之间添加一个斥力，每条边的两个节点之间添加一个引力，每次迭代节点会在各个斥力和引力的作用下移动位置，多次迭代后节点会静止在一个受力平衡的位置，达到整个模型的能量最小化。
                                force: {
                                    // 力引导布局的结果有良好的对称性和局部聚合性，也比较美观。
                                    // [ default: 50 ]节点之间的斥力因子(关系对象之间的距离)。支持设置成数组表达斥力的范围，此时不同大小的值会线性映射到不同的斥力。值越大则斥力越大
                                    repulsion: 200,
                                    // [ default: 30 ]边的两个节点之间的距离(关系对象连接线两端对象的距离,会根据关系对象值得大小来判断距离的大小)，
                                    edgeLength: [130, 110]
                                    // 这个距离也会受 repulsion。支持设置成数组表达边长的范围，此时不同大小的值会线性映射到不同的长度。值越小则长度越长。如下示例:
                                    // 值最大的边长度会趋向于 10，值最小的边长度会趋向于 50      edgeLength: [10, 50]
                                },
                                // 图的布局。[ default: 'none' ]
                                layout: "force",
                                // 'none' 不采用任何布局，使用节点中提供的 x， y 作为节点的位置。
                                // 'circular' 采用环形布局;'force' 采用力引导布局.
                                // 标记的图形
                                symbol: 'recangle',
                                // 关系边的公用线条样式。其中 lineStyle.color 支持设置为'source'或者'target'特殊值，此时边会自动取源节点或目标节点的颜色作为自己的颜色。

                                lineStyle: {
                                    // 线的颜色[ default: '#aaa' ]
                                    color: '#fff',
                                    // 线宽[ default: 1 ]
                                    width: 0,
                                    // 线的类型[ default: solid实线 ]   'dashed'虚线    'dotted'
                                    type: 'dashed',
                                    // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。[ default: 0.5 ]
                                    opacity: 0,
                                    // 边的曲度，支持从 0 到 1 的值，值越大曲度越大。[ default: 0 ]
                                    curveness: 0
                                }
                                ,
                                // 关系对象上的标签
                                label: {
                                    normal: {
                                        // 是否显示标签
                                        show: true,
                                        // 标签位置:'top''left''right''bottom''inside''insideLeft''insideRight''insideTop''insideBottom''insideTopLeft''insideBottomLeft''insideTopRight''insideBottomRight'
                                        position: "inside",
                                        // 文本样式
                                        textStyle: {
                                            fontSize: 16,
                                            color: 'white'
                                        }
                                    }
                                },
                                // 连接两个关系对象的线上的标签
                                edgeLabel: {
                                    normal: {
                                        show: false,
                                        textStyle: {
                                            // fontSize: 14
                                        },
                                        // 标签内容
                                        formatter: function (param) {
                                            return param.data.category;
                                        }
                                    }
                                },
                                data: [{
                                    name: "职业发展",
                                    draggable: true, // 节点是否可拖拽，只在使用力引导布局的时候有用。
                                    symbolSize: [150, 60], // 关系图节点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                                    itemStyle: {
                                        color: 'RGB(87, 37, 188)',// 关系图节点标记的颜色

                                    },
                                    // category: "企业分析" // 数据项所在类目的 index。
                                }, {
                                    name: "科技",
                                    draggable: true,
                                    symbolSize: [100, 40],
                                    itemStyle: {
                                        color: 'RGB(245, 189, 187)',

                                    },
                                    //  category: "培育"
                                }, {
                                    name: "心理学",
                                    draggable: true,
                                    symbolSize: [100, 40],
                                    itemStyle: {
                                        color: 'RGB(255, 159, 89)',

                                    },
                                    // category: "入驻"
                                }, {
                                    name: "音乐",
                                    draggable: true,
                                    symbolSize: [80, 30],
                                    itemStyle: {
                                        color: 'RGB(164, 206, 244)'
                                    },
                                    // category: "申报"
                                }, {
                                    name: "穿搭",
                                    draggable: true,
                                    symbolSize: [80, 30],
                                    itemStyle: {
                                        color: 'RGB(164, 206, 244)'
                                    },
                                    // category: "产教融合"
                                }, {
                                    name: "娱乐",
                                    draggable: true,
                                    symbolSize: [60, 25],
                                    itemStyle: {
                                        color: 'RGB(74, 111, 226)'
                                    },
                                    // category: "产教融合"
                                }, {
                                    name: "健康",
                                    draggable: true,
                                    symbolSize: [90, 30],
                                    itemStyle: {
                                        color: 'RGB(230, 90, 86)'
                                    },
                                    // category: "产教融合"
                                }, {
                                    name: "文艺",
                                    draggable: true,
                                    symbolSize: [60, 25],
                                    itemStyle: {
                                        color: 'RGB(74, 111, 226)'
                                    },
                                    // category: "产教融合"
                                }, {
                                    name: "文化",
                                    draggable: true,
                                    symbolSize: [60, 25],
                                    itemStyle: {
                                        color: 'RGB(245, 189, 187)'
                                    },
                                    // category: "产教融合"
                                }],
                                // 节点分类的类目，可选。如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。

                                // 节点间的关系数据
                                links: [{
                                    target: "心理学",
                                    source: "职业发展",
                                    // 关系对象连接线上的标签内容

                                }, {
                                    target: "穿搭",
                                    source: "职业发展",

                                }, {
                                    target: "音乐",
                                    source: "职业发展",

                                }, {
                                    target: "科技",
                                    source: "职业发展",

                                }, {
                                    target: "健康",
                                    source: "职业发展",

                                }, {
                                    target: "娱乐",
                                    source: "职业发展",

                                }, {
                                    target: "文艺",
                                    source: "职业发展",

                                }, {
                                    target: "文化",
                                    source: "职业发展",

                                }]
                            }]

                        });</script>
                </div>

            </div>
        </div>
        <!-- <div class="box7">
               

            </div>


            <script>
               
                for (let i = 0; i < animatedTexts.length; i++) {
                    animatedTexts[i].style.animationDelay = `${i * 30}s`; // 设置每行文字的动画延迟时间
                }
            </script>

            <div class="box8">
                <h4>个人现状分析<br>Person analysis</h4>
                
                <img src="images/box8.png">
            </div>


            <div class="image-overlay">
                <img src="images/person.png" alt="Overlay Image">
            </div>-->
    </div>



    <!--<div class="boxTwo">

            
        </div>-->


    <div class="box">
        <div class="box9">
            <h4>简历个性化分析<br>analysis</h4>
            <div class="box11">
                <div class="box14">
                    <div class="box15" style="min-height: 400px;">
                        <div class="box16" style="max-height: 40px;position: absolute; top: 0; left: 0; z-index: 10;">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <div class="circle3"></div>
                        </div>
                        <!-- 修改简历分析内容区域，添加最小高度 -->
                        <div class="cv-analysis" style="color: RGB(87, 37, 188); padding: 50px 20px 20px 20px; white-space: pre-line; text-align: left; line-height: 1.6; width: 100%; box-sizing: border-box; min-height: 300px;">
                            {{ cv }}
                        </div>
                    </div>
                </div>
            </div>


            <h4>问卷综合分析<br>analysis</h4>
            <div class="box11">
                <div class="box14">
                    <div class="box15" style="min-height: 400px;">
                        <div class="box16" style="max-height: 40px;position: absolute; top: 0; left: 0; z-index: 10;">
                            <div class="circle1"></div>
                            <div class="circle2"></div>
                            <div class="circle3"></div>
                        </div>

                        <!-- 问卷分析内容区域，添加相同的最小高度 -->
                        <div class="questionnaire-analysis" style="color: RGB(87, 37, 188); padding: 50px 20px 20px 20px; white-space: pre-line; text-align: left; line-height: 1.6; width: 100%; box-sizing: border-box; min-height: 300px;">
                            {{ questionnaire|safe }}
                        </div>
                    </div>
                </div>
            </div>



        </div>



        <div class="image-overlay">

        </div>

    </div>
    <div style="width: 240px;
    height: 80px;
    background-color: RGB(237, 137, 54);
    color: #fff;
    border-radius: 15px;
    text-align: center;
    line-height: 80px;
    font-size: 25px;
   margin-left: 600px;

    ">
        <a href="{% url 'contents:job_recommend' %}" style="text-decoration: none;">职业推荐</a>
    </div>





</body>

</html>
